<template>
    <Dialog :title="comInfo.name" :show="true" @close="cancel" :width="440" height="auto" :left="uiLeft" :top="uiTop">
        <div class="box">
            <div class="select-header">
                <el-button @click="featureSelect.selectEvent.emit('select')">重新框选</el-button>
            </div>
            <div class="select-table">
                <div class="center-table">
                    <el-table :data="selectQueryInfoPagesRef" border :cell-style="cellStyle2" ref="tableRef"
                        :header-cell-style="cellStyleSmall"  @selection-change="handleSelectionChange"
                        @row-dblclick="handleRowDblclick">
                        <el-table-column type="selection" width="40" align="center" />
                        <el-table-column type="index" label="序号" width="55" :show-overflow-tooltip="true" />
                        <el-table-column prop="id" label="ID" :show-overflow-tooltip="true" width="auto" />
                        <el-table-column prop="layerName" label="图层" :show-overflow-tooltip="true" width="auto" />
                        <el-table-column prop="name" label="名称" :show-overflow-tooltip="true" width="auto" />
                        <el-table-column prop="featureClassName" label="要素类" :show-overflow-tooltip="true"
                            width="auto" />
                    </el-table>
                </div>

                <div class="bottom">
                    <div class="fun">
                        <div>
                            <el-checkbox v-model="isHighlighted" @change="highlightRecord" class="check-color" >全选{{
                                pagesRef.total
                            }}条记录</el-checkbox>
                        </div>
                        <div>
                            <el-button @click="create">添加到编辑列表</el-button>
                        </div>
                    </div>
                    <div class="bottom-pag">
                        <PaginatorCom :currentPage="pagesRef.pageNum" :pageSize="pagesRef.pageSize"
                            :total="pagesRef.total" @update:currentPage="handleCurrentChange"
                            @update:pageSize="handleSizeChange" />
                    </div>
                </div>
            </div>
        </div>
    </Dialog>
</template>

<script setup lang="ts">
import Dialog from "@/components/Dialog.vue";
import { onMounted, ref, onBeforeUnmount, computed, watch, shallowRef, nextTick } from "vue";
import { getProjectManager } from "@/scripts/getProjectManager";
import {
    createVueDisposer,
    toVR,
} from "earthsdk-ui";
import { FeatureEdit } from "@/scripts/cimrtsManager/featureEdit";
import { cellStyle, headCellStyle, cellStyleSmall, cellStyle2, } from "../../scripts/tableStyle";
import { FeatureSelect } from "@/scripts/cimrtsManager/featureSelect";
import PaginatorCom from "@/components/common/PaginatorCom.vue";
import { ElMessage } from 'element-plus';

const props = withDefaults(defineProps<{ comInfo: any }>(), {});
const emits = defineEmits(["cancel"]);
const cancel = () => {
    emits("cancel", props.comInfo.id);
};
const uiLeft = document.body.clientWidth - 10 - 430;
const uiTop = 60;

const d = createVueDisposer(onBeforeUnmount);
const objm = getProjectManager();

const cimrtsManager = getProjectManager().cimrtsManager;
const featureSelect = cimrtsManager.featureSelect as FeatureSelect;

// 框选查询信息
const selectQueryInfoRef = toVR<any>(d, [featureSelect, "selectQueryInfo"]);

// 框选查询信息分页
const selectQueryInfoPagesRef = toVR<any>(d, [featureSelect, "selectQueryInfoPages"]);

// 分页信息
const pagesRef = toVR<{ pageNum: number, pageSize: number, total: number }>(d, [featureSelect, "pages"]);

/**
 * 监听当前页数变化
 * @param {number} val
 */
const handleCurrentChange = (val: number) => {
    pagesRef.value.pageNum = val;
    featureSelect.selectQueryPageChange()
    //    切换页码时，如果高亮状态开启，则勾选所有行
    nextTick(() => {
        if (isHighlighted.value) {
            setAllHighlight();
        }
    })
};
/**
 * 监听当前页条数变化
 * @param {number} val
 */
const handleSizeChange = (val: number) => {
    pagesRef.value.pageSize = val;
    featureSelect.selectQueryPageChange()
    nextTick(() => {
        if (isHighlighted.value) {
            setAllHighlight();
        }
    })
};

const selectIdsRef = toVR<any>(d, [featureSelect, "selectIds"]);
const isHighlighted = ref(false)
const tableRef = ref<any>(null)

const isIndeterminate = ref(false)

/** 多选 拿到id数组*/
const handleSelectionChange = (val: any) => {
    selectIdsRef.value = val.map((item: any) => item.id)
    // isIndeterminate.value = val.length > 0 && val.length < selectQueryInfoRef.value.length
}

const setPageHighlight = () => {
    // 如果高亮状态关闭，切换所有选择状态
    const allRows = selectQueryInfoPagesRef.value;
    let ids: any = []
    allRows.forEach((row: any) => {
        tableRef.value.toggleRowSelection(row, true);
        ids.push(row.id);
    });
    selectIdsRef.value = [...ids]
}

const setAllHighlight = () => {
    const pageRows = selectQueryInfoPagesRef.value;
    pageRows.forEach((row: any) => {
        tableRef.value.toggleRowSelection(row, true);
    });
    const allRows = selectQueryInfoRef.value;
    let ids: any = []
    allRows.forEach((row: any) => {
        ids.push(row.id);
    });
    selectIdsRef.value = [...ids]
}


/**点击全选记录 */
const highlightRecord = () => {
    if (!isHighlighted.value) {
        // 如果高亮状态开启，清除高亮选择，但保留已选择的项
        tableRef.value.clearSelection();
        selectIdsRef.value = [];
    } else {
        // 如果高亮状态关闭，切换所有选择状态
        setAllHighlight();
    }
    // isIndeterminate.value = false
};

const create = () => {
    if (selectIdsRef.value.length == 0 && !isHighlighted.value) return ElMessage.error('请先勾选要素')
    featureSelect.createFeatureByIds(selectIdsRef.value);
    featureSelect.selectEvent.emit("none");
    isHighlighted.value = false;
}

// 双击列表
const handleRowDblclick = (row: any) => {
    const id = selectIdsRef.value.find((item: any) => item.id == row.id)
    if (!id) {
        selectIdsRef.value = [...selectIdsRef.value, row.id]
        tableRef.value.toggleRowSelection(row, true);
    }
    featureSelect.flyToFeature(row.id);
}

onMounted(() => {
    featureSelect.selectEvent.emit("select");
});

onBeforeUnmount(() => {
    featureSelect.selectEvent.emit("none");
    featureSelect.clear()
});

</script>

<style scoped>
.box {
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.select-table {
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
    gap: 10px;
    justify-content: space-between;
}

.bottom {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.bottom-pag {
    display: flex;
    justify-content: center;
}

.fun {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
</style>